<template>
   <van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <div class="activity">
       <!-- <h3>九列表的活动5 </h3> -->
       <div class="product"> 
         <h1>热门活动上线中</h1>
          <div class="shuju" v-for="(item,index) in productDataaend" :key = index>
           <div class="content">
             <div class="top">
               
             </div>
             <div class="cont">
                <img :src="item.image" alt="">
             </div>
             <div class="foot">
                <div class="title">
                 <h4>{{item.name}}</h4> 

                </div>
                <div class="partin">立即参与 &gt;</div>
             </div>
           </div>    
        </div> 
       </div>
    </div>
  </van-pull-refresh>
</template>

<script>
    export default {
       name: "Activity",

       data(){
       return{
         count: 10,
            isLoading: false,

        productDataact:[],
        productDataaend:[],

        
        tabIndex:0,
        //订单数据
        orderData:[]
    };
  },

  created(){
    this.GetRecommend();
    // this.orderData
  },
  methods:{
     onRefresh() {
            setTimeout(() => {
                Toast('刷新成功');
                this.isLoading = false;
                this.count+=10;
                this.GetRecommend();
            }, 1000);
        },
    GetRecommend(){
        this.axios({
        method: "get",
        url: `https://apis.netstart.cn/douguo/home/events/getlists?offset=${this.count}limit=${this.count}`,
        //get请求参数写在params中
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          offset: "0",
          limit: "20",
        },
      })
        .then((result) => {
          // console.log("result==>", result);
          if (result) {
            
          }
          this.productDataact = result.data.data.ongoing;
          this.productDataaend = result.data.data.ended.events;
          
        //   let activity = this.productDataact.filter( (item) => {
        //     return item.type == 1
        //   } )
        //   .map( (item) => {
        //     return item;
        //   })
        //   this.productDataact = activity;
        
        //   console.log("活动的数据==>", activity);
          // console.log(" this.productDataact==>", this.productDataact);
          // console.log(" this.productDataaend==>", this.productDataaend);
          //输出结果看一下
      ;
        })
        .catch((err) => {
          console.log("err==>", err); //用来捕获错误

          // console.log("err==>",err);
        });
    },
  },

    }
</script>

<style lang="less" scoped>
  .activity{
    .product{
      h1{
        margin-bottom: 0;
        padding-left: 10px;
      }
        .shuju{
            padding: 0px 10px;
            .content{
               .top{
                 
                  h1{
                    margin-bottom: 6px;
                  }
               }
               .cont{
                
                border-radius: 5px;
                padding-bottom: 8px;
                 width: 100%;
                 overflow: hidden;
                 width: 100%;
                 box-sizing: border-box;
                img{
                border-radius: 5px;

                   width: 100%;                
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
               }
               .foot{
                display: flex;
                align-items: center;
                 .title{
                    font-size: medium;
                    font-weight: 900;
                 }
                 .partin{
                   width: 90px;
                   height: 60px;
                   line-height: 60px;
                   text-align: center;
                   color: #6da8af;
                   font-weight: 900;
                   font-size: small;
                 }
               }
            }
        }
    }
  }

</style>